<template>
	<view class="container">
		<view class="header">
			<view class="header-title" @click="startask()">我的</view>
			<view class="header-switch">
				<view class="header-switch-ask" :class="{ 'header-switch-s': switchnum == 0 }" @click="switchclick(0)">答疑广场</view>
				<view class="header-switch-consultation" :class="{ 'header-switch-s': switchnum == 1 }" @click="switchclick(1)">我的答疑</view>
				<view class="header-switch-information" :class="{ 'header-switch-s': switchnum == 2 }" @click="switchclick(2)">我的咨询</view>
				<view class="header-switch-border" :class="{ 'header-switch-border-s': switchnum == 0 }"></view>
				<view class="header-switch-border" :class="{ 'header-switch-border-s': switchnum == 1 }"></view>
				<view class="header-switch-border" :class="{ 'header-switch-border-s': switchnum == 2 }"></view>
			</view>
		</view>
		<view class="body">
			<!-- 答疑广场 -->
			<view class="body-ask dygc" v-if="switchnum == 0 && select">
				<view class="body-ask-content ask">
					<mescroll-uni style="min-height: 0;" ref="mescrollRef1" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index" @click="questionsjump(index)">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">{{ item.question }}</view>
							<view class="body-ask-piece-content-answer">{{ item.answer }}</view>
						</view>
						<view class="body-ask-piece-data">
							<view class="body-ask-piece-data-1">
								<view class="body-ask-piece-data-star" v-if="item.score">
									<view class="body-ask-piece-data-star-icon">{{ item.score }}</view>
								</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 0">待解答</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 1">已回复</view>
								<view class="body-ask-piece-data-status statuscolor2" v-else-if="item.state == 2">已完成</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 3">已退回</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 4">转交中</view>
								<view class="body-ask-piece-data-status statuscolor0" v-else-if="item.state == 5">已追问</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 6">已追答</view>
							</view>
							<view class="body-ask-piece-data-2">
								<view class="body-ask-piece-data-time">{{ item.time }}
								</view>
								<view class="point" v-if="item.isReadStudent != 1">
									<view class="body-ask-piece-data-point"></view>
								</view>
							</view>
						</view>
					</view>
					</mescroll-uni>
				</view>
			</view>
			<!-- select -->
			<view class="body-ask" v-if="switchnum == 0 && !select">
				<view class="body-ask-button2" >
					<view class="body-ask-button-selected">
						<view class="">已选择：</view>
						<view class="body-ask-button-select">{{ this.selectnum }}</view>
						<view class="">项</view>
					</view>
					<view></view>
					<view class="body-ask-button-delete" @click="selectclick()">取消</view>
					<view class="body-ask-button-delete2" @click="deleteclick()">删除</view>
				</view>
				<view class="body-ask-content">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">
								{{ item.question }}
							</view>
							<view class="body-ask-piece-content-answer">
								{{ item.answer }}
							</view>
						</view>
						<view class="body-ask-piece-data2">
							<uni-data-checkbox class="body-ask-piece-data2-checkbox" multiple v-model="item.select" :localdata="range" @change="checkboxchange()"></uni-data-checkbox>
						</view>
					</view>
					<view class="" style="height: 10vw;"></view>
				</view>
			</view>
			<!-- 我的答疑 -->
			<view class="body-ask" v-if="switchnum == 1 && select">
				<view class="body-ask-button" >
					<view class="body-ask-button-select" @click="selectclick()">选择</view>
					<view></view>
					<view class="body-ask-button-delete" >删除</view>
				</view>
				<view class="body-ask-content ask2"  @scroll="onScroll()">
					<mescroll-uni style="min-height: 0;" ref="mescrollRef2" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index" @click="questionsjump(index)">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">{{ item.question }}</view>
							<view class="body-ask-piece-content-answer">{{ item.answer }}</view>
						</view>
						<view class="body-ask-piece-data">
							<view class="body-ask-piece-data-1">
								<view class="body-ask-piece-data-star" v-if="item.score">
									<view class="body-ask-piece-data-star-icon">{{ item.score }}</view>
								</view>
								<view class="body-ask-piece-data-status statuscolor0" v-else-if="item.state == 0">待解答</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 1">已解答</view>
								<view class="body-ask-piece-data-status statuscolor2" v-else-if="item.state == 2">已完成</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 3">已退回</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 4">转交中</view>
								<view class="body-ask-piece-data-status statuscolor0" v-else-if="item.state == 5">待解答</view>
								<view class="body-ask-piece-data-status statuscolor1" v-else-if="item.state == 6">已解答</view>
							</view>
							<view class="body-ask-piece-data-2">
								<view class="body-ask-piece-data-time">{{ item.time }}</view>
								<view class="point" v-if="item.isReadStudent != 1">
									<view class="body-ask-piece-data-point"></view>
								</view>
							</view>
						</view>
					</view>
					</mescroll-uni>
				</view>
			</view>
			<!-- select -->
			<view class="body-ask" v-if="switchnum == 1 && !select">
				<view class="body-ask-button" >
					<view class="body-ask-button-select" @click="selectclick()">选择</view>
					<view></view>
					<view class="body-ask-button-delete" >删除</view>
				</view>
				<view class="body-ask-content">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">{{ item.question }}</view>
							<view class="body-ask-piece-content-answer">{{ item.answer }}</view>
						</view>
						<view class="body-ask-piece-data2">
							<uni-data-checkbox class="body-ask-piece-data2-checkbox" multiple v-model="item.select" :localdata="range" @change="checkboxchange()"></uni-data-checkbox>
						</view>
					</view>
					<view class="" style="height: 10vw;"></view>
				</view>
			</view>
			<!-- 我的咨询 -->
			<view class="body-ask" v-if="switchnum == 2 && select">
				<view class="body-ask-button" >
					<view class="body-ask-button-select" @click="selectclick()">选择</view>
					<view></view>
					<view class="body-ask-button-delete" >删除</view>
				</view>
				<view class="body-ask-content">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">{{ item.question }}</view>
							<view class="body-ask-piece-content-answer">{{ item.answer }}</view>
						</view>
						<view class="body-ask-piece-data2">
							<uni-data-checkbox class="body-ask-piece-data2-checkbox" multiple v-model="item.select" :localdata="range" @change="checkboxchange()"></uni-data-checkbox>
						</view>
					</view>
					<view class="" style="height: 10vw;"></view>
				</view>
			</view>
			<!-- select -->
			<view class="body-ask" v-if="switchnum == 2 && !select">
				<view class="body-ask-button2">
					<view class="body-ask-button-selected">
						<view class="">已选择：</view>
						<view class="body-ask-button-select">{{ this.selectnum }}</view>
						<view class="">项</view>
					</view>
					<view></view>
					<view class="body-ask-button-delete" @click="selectclick()">取消</view>
					<view class="body-ask-button-delete2" @click="deleteclick()">删除</view>
				</view>
				<view class="body-ask-content">
					<view  class="body-ask-piece" v-for="item, index in asklist" :key="index">
						<view class="body-ask-piece-icon"></view>
						<view class="body-ask-piece-content">
							<view class="body-ask-piece-content-ask">{{ item.question }}
							</view>
							<view class="body-ask-piece-content-answer">{{ item.answer }}
							</view>
						</view>
						<view class="body-ask-piece-data2">
							<uni-data-checkbox class="body-ask-piece-data2-checkbox" multiple v-model="item.select" :localdata="range" @change="checkboxchange()"></uni-data-checkbox>
						</view>
					</view>
					<view class="" style="height: 10vw;"></view>
				</view>
			</view>
		</view>
		<!-- 弹出 提问收到答复 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{ popup.title }}</view>
				<view class="popup-text">{{ popup.text }}</view>
				<view class="popup-button" @click="popupjump()">{{ popup.button }}</view>
			</view>
		</uni-popup>
		<!-- 弹出 提问收到答复 -->
		<uni-popup ref="popup2" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{ popup.title }}</view>
				<view class="popup-text">{{ popup.text }}</view>
				<view class="popup-button" @click="isdelete()">{{ popup.button }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { logout } from '@/api/login'
	import { getMyInfoStudentInfo,getUnreadInformation } from "@/api/index";
	import { getQuestionsMyQuestions, getQuestionsedit, getCounselingMyConsults, getCounselingedit, getQuestionssDetail, getCounselingDetail} from "@/api/mine/index";
	import { getinfo, setinfo, removeinfo } from '@/utils/auth5'
	import { getgrade, setgrade, removegrade } from '@/utils/auth8'
	import { questionsToBeGet, teacherQuestionsInRoster, myConsults} from "@/api/teacher/index";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				switchnum: 0,
				switch0: true,
				switch1: false,
				switch2: false,
				asklist: [],
				list: [],
				select: true,
				select0: true,
				select1: true,
				select1: true,
				selectnum: 0,
				range: [{"value": 0,"text": ""	}],
				nickName: this.$store.state.user.personal.nickName,
				questionsCount: this.$store.state.user.personal.questionsCount,
				consultsCount: this.$store.state.user.personal.consultsCount,
				evaluatesCount: this.$store.state.user.personal.evaluatesCount,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				popup:{
					title: '',
					text: '',
					button: '',
					url: '',
				},
				info: getinfo(),
				grade:'',
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   },
		   refresh2() {
		      return this.$store.state.user.refresh2
		   },
		   switch() {
		      return this.$store.state.user.switch
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					// console.log("newval",newval)
					this.Initialize()
					// this.switchclick(this.$store.state.user.switch)
				}
			},
			refresh2: {
				immediate: true,
				handler: function(newval) {
					// console.log("newval",newval)
					this.switchclick(this.switchnum)
				}
			},
			switch: {
				immediate: true,
				handler: function(newval) {
					// console.log("switchclick newval",newval)
					this.switchclick(newval)
				}
			}
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.changet()
				this.dealgrade()
				this.pageNum = 1
				if(this.$store.state.user.name){
					this.myInfostudentInfo()
					this.unreadInformation()
				}else{
					this.$store.state.user.urllogin = '/pages/mine/index'
					this.$tab.reLaunch('/pages/login')
				}
				this.mescroll.triggerDownScroll()
			},
			changet(){
				uni.setTabBarItem({
					index: 1,
					text: '转交管理',
					pagePath: '/pages/teacher/transfer',
					iconPath: 'static/images/tabbar/home0.png',
					selectedIconPath: 'static/images/tabbar/home1.png',
				})
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					pagePath: '/pages/teacher/mine',
				})
			},
			dealgrade(){
				let grade = getgrade()
				for(let i in grade){
					for(let j in grade[i]){
						if(grade[i][j].value == this.info.gradeId){
							this.grade = grade[i][j].text
						}
					}
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let data={ "pageNum": page.num, "pageSize": page.size }
				if(this.switchnum == 0){
					questionsToBeGet(data).then(res => {
						console.log("res")
						if(page.num==1){
							this.asklist=[]
						}
						let ask = []
						let data = res.rows
						this.total = res.total
						for(let i in data){
							let answer = data[i].wordAnswer
							if(!answer){ answer = '有同学向您提了一个问题' }
							ask.push({
								id: data[i].id,
								time: this.timeago(data[i].questionTime),
								question: data[i].question,
								isReadStudent: data[i].isReadStudent,
								answer: answer,
								score: data[i].score,
								state: data[i].state,
							})
						}
						this.mescroll.endSuccess(ask.length,res.total);
						this.asklist=this.asklist.concat(ask);
					});
				}else if(this.switchnum == 1){
					teacherQuestionsInRoster(data).then(res => {
						if(page.num==1){
							this.asklist=[]
						}
						let ask = []
						let data = res.rows
						this.total = res.total
						for(let i in data){
							let answer = ''	
							if(data[i].answerHistoryList&&data[i].answerHistoryList.length>0){
								answer = data[i].answerHistoryList[0].wordAnswer
							}
							ask.push({
								id: data[i].id,
								time: this.timeago(data[i].questionTime),
								studentName: data[i].studentName,
								question: data[i].question,
								isReadStudent: data[i].isReadStudent,
								answer: answer,
								score: data[i].score,
								state: data[i].state,
							})
						}
						this.mescroll.endSuccess(ask.length,res.total);
						this.asklist=this.asklist.concat(ask);
					});
				}else if(this.switchnum == 2){
					myConsults(data).then(res => {
						if(page.num==1){
							this.asklist=[]
						}
						let ask = []
						let data = res.rows
						this.total = res.total
						for(let i in data){
							let answer = ''	
							if(data[i].answerHistoryList&&data[i].answerHistoryList.length>0){
								answer = data[i].answerHistoryList[0].wordAnswer
							}
							ask.push({
								id: data[i].id,
								time: this.timeago(data[i].questionTime),
								studentName: data[i].studentName,
								question: data[i].question,
								isReadStudent: data[i].isReadStudent,
								answer: answer,
								score: data[i].score,
								state: data[i].state,
							})
						}
						this.mescroll.endSuccess(ask.length,res.total);
						this.asklist=this.asklist.concat(ask);
					});
				}
			},
			unreadInformation(){
				getUnreadInformation().then(res => {
					console.log("res",res)
					this.$store.state.user.prompt.tobeGetQuestions = res.tobeGetQuestions
					this.$store.state.user.prompt.unreadCounselingNum = res.unreadCounselingNum
					this.$store.state.user.prompt.unreadQuestionsNum = res.unreadQuestionsNum
					let num = res.tobeGetQuestions
					if(num>0){
						if(num>99){
							num='99+'
						}else{
							num+=''
						}
					}
					uni.setTabBarBadge({ //显示数字
					  index: 1,//tabbar下标
					  text: num//数字
					})
					let num2 = res.unreadCounselingNum+res.unreadQuestionsNum
					if(num2>0){
						if(num2>99){
							num2='99+'
						}else{
							num2+=''
						}
					}
					uni.setTabBarBadge({ //显示数字
					  index: 2,//tabbar下标
					  text: num2//数字
					})
				});
			},
			myInfostudentInfo(){
				getMyInfoStudentInfo().then(res => {
					this.$store.state.user.personal = res
					this.nickName = this.$store.state.user.personal.nickName
					this.questionsCount = this.$store.state.user.personal.questionsCount
					this.consultsCount = this.$store.state.user.personal.consultsCount
					this.evaluatesCount = this.$store.state.user.personal.evaluatesCount
				});
			},
			questionsMyQuestions(data){
				if(this.switchnum == 0){
					getQuestionsMyQuestions(data).then(res => {
						if(this.pageNum==1){
							this.asklist=[]
							this.list=[]
						}
						let data = res.rows
						this.total = res.total
						for(let i in data){
							this.list.push(data[i])
							let time = this.timeago(data[i].questionTime)
							let answer = ''	
							if(data[i].answerHistoryList&&data[i].answerHistoryList.length>0){
								answer = data[i].answerHistoryList[0].wordAnswer
							}
							this.asklist.push({
								id: data[i].id,
								time: time,
								question: data[i].question,
								isReadStudent: data[i].isReadStudent,
								answer: answer,
								score: data[i].score,
								state: data[i].state,
							})
						}
					});
				}else{
					getCounselingMyConsults(data).then(res => {
						if(this.pageNum==1){
							this.asklist=[]
							this.list=[]
						}
						let data = res.rows
						this.total = res.total
						for(let i in data){
							this.list.push(data[i])
							let time = this.timeago(data[i].questionTime)
							let answer = ''	
							if(data[i].answerHistoryList&&data[i].answerHistoryList.length>0){
								answer = data[i].answerHistoryList[0].wordAnswer
							}
							this.asklist.push({
								id: data[i].id,
								time: time,
								question: data[i].question,
								isReadStudent: data[i].isReadStudent,
								answer: answer,
								score: data[i].score,
								state: data[i].state,
							})
						}
					});
				}
				// console.log("this.asklist",this.asklist)
			},
			timeago(dateTimeStamp){
				if(!dateTimeStamp){
					return '';
				}
				dateTimeStamp = new Date(dateTimeStamp).getTime()
				
				var minute = 1000 * 60;      //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime();   //获取当前时间毫秒
				var diffValue = now - dateTimeStamp;//时间差
			
				if(diffValue < 0){
					return;
				}
				var minC = diffValue/minute;  //计算时间差的分，时，天，周，月
				var hourC = diffValue/hour;
				var dayC = diffValue/day;
				var weekC = diffValue/week;
				var monthC = diffValue/month;
				var result
				if(monthC >= 1){
					result = " " + parseInt(monthC) + "月前"
				}else if(weekC >= 1 && weekC < 4){
					result = " " + parseInt(weekC) + "周前"
				}else if(dayC >= 1 && dayC < 7){
					result = " " + parseInt(dayC) + "天前"
				}else if(hourC >= 1 && hourC < 24){
					result = " " + parseInt(hourC) + "小时前"
				}else if(minC >= 1 && minC < 60){
					result =" " + parseInt(minC) + "分钟前"
				}else if(diffValue >= 0 && diffValue <= minute){
					result = "刚刚"
				}else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			},
			switchclick(i){
				// console.log("switchclick",i)
				if(i==0){
					
				}else if(i==1){
					this.$store.state.user.askconsult = true
				}else if(i==2){
					this.$store.state.user.askconsult = false	
				}
				this.switchnum = i
				this.select=true
				this.pageNum=1
				this.asklist=[]
				this.list=[]
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll()
				this.Initialize()
			},
			checkboxchange(){
				console.log("this.asklist",this.asklist)
				this.selectnum=0
				for(let i of this.asklist){
					if(i.select&&i.select.length==1){
						this.selectnum++
					}
				}
			},
			questionsjump(i){
				// console.log("i",i)
				console.log("this.list[i]",this.list[i])
				// console.log("this.list",this.list)
				// this.$store.state.user.myquestion = this.list[i]
				if(this.switchnum == 1){
					this.$store.state.user.evaluate.kind=1
					this.counselingDetail(this.list[i].id)
				}else if(this.switchnum == 2){
					this.$store.state.user.evaluate.kind=0
					this.questionssDetail(this.list[i].id)
				}
				this.$store.state.user.questionid=this.list[i].id
				this.$store.state.user.evaluate.questionOrCounsultId=this.list[i].id
				this.$store.state.user.refresh=!this.$store.state.user.refresh
			},
			async questionsjump2(data){
				await this.ReadStudent(data)
				if(this.switchnum == 0){
					await this.$router.push('/pages/mine/questions')
				}else if(this.switchnum == 1){
					await this.$router.push('/pages/mine/questions')
				}else if(this.switchnum == 2){
					await this.$router.push('/pages/mine/questions2')
				}
				
			},
			// getQuestionssDetail
			questionssDetail(data){
				getQuestionssDetail(data).then(res => {
					this.$store.state.user.myquestion = res.data
					this.questionsjump2(data)
				});
			},
			// getCounselingDetail
			counselingDetail(data){
				getCounselingDetail(data).then(res => {
					this.$store.state.user.myquestion = res.data
					this.questionsjump2(data)
				});
			},
			selectclick(){
				this.select=!this.select
			},
			deleteclick(){
				
				let falg = true
				for(let i of this.asklist){
					console.log("i.select",i.select)
					if(i.select&&i.select.length==1){
						falg = false
					}
				}
				if(falg){
					this.popup={
						title: '删除失败',
						text: '请选择需要删除的信息',
						button: '确定',
						url: '',
					}
					this.$refs.popup.open('center')
				}else{
					this.popup={
						title: '确认删除',
						text: '确认要删除这些问题吗',
						button: '确定',
						url: '',
					}
					this.$refs.popup2.open('center')
				}
			},
			isdelete(){
				for(let i of this.asklist){
					if(i.select&&i.select.length==1){
						let data = {
							"delFlagStudent":"2",
							"isReadStudent":"1",
							"id": i.id,
						}
						this.questionsedit(data)
					}
				}
				this.selectclick()
				this.pageNum=1
				this.asklist=[]
				this.questionsMyQuestions('')
				this.closepopup()
			},
			//学生已读
			ReadStudent(id){
				let data = {
					"isReadStudent":"1",
					"id": id,
				}
				this.questionsedit(data)
			},
			//编辑
			questionsedit(data){
				if(this.switchnum == 1){
					getQuestionsedit(data).then(res => {});
				}else if(this.switchnum == 1){
					getCounselingedit(data).then(res => {});
				}
			},
			handleToLogin() {
			   this.$tab.reLaunch('/pages/login')
			},
			editclick(){
				this.$router.push('/pages/mine/personal')
			},
			logoutclick(){
				this.$modal.confirm('确定退出系统吗？').then(() => {
				  this.$store.dispatch('LogOut').then(() => {
					this.clearall()
				    this.$tab.reLaunch('/pages/login')
				  })
				})
			},
			clearall(){
				this.$store.state.user.name = ''
				this.$store.state.user.personal = {
					avatar: "",
					nickName: "",
					consultsCount: 0,
					evaluatesCount: 0,
					questionsCount: 0,
				}
			},
			popupjump(){
				if(this.popup.url){
					this.$router.push(this.popup.url)
				}else{
					this.$refs.popup.close()
				}
			},
			closepopup(){
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
		},
	}
</script>

<style>
.container {
	font-size: 4vw;
	width: 100vw;
	height: calc(100vh - 50px);
	/* height: auto; */
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 25vw auto 1fr;
	/* background: #000000; */
}

.header {
	width: 100%;
	height: 25vw;
	background: #ffffff;
	border: 1px solid #F6F7F8;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 1fr 1fr;
}

.header-title {
	font-size: 5vw;
}

.header-switch {
	border-top: 1px solid #F6F7F8;
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr auto;
}

.header-switch-ask {
	cursor: pointer;
}

.header-switch-consultation {
	cursor: pointer;
}

.header-switch-information {
	cursor: pointer;
}

.header-switch-s {
	color: #1890FF;
}

.header-switch-border {
	width: 10vw;
	height: 3px;
}

.header-switch-border-s {
	width: 10vw;
	height: 3px;
	background: #1890FF;
}

.nodata-icon {
	margin: 0 auto 0 auto;
	width: 100vw;
	height: 100vw;
	background: url(../../static/index/nodata.svg);
	/* background: url(../../static/index/nodata.png); */
	background-size: 100% 100%;
}

.nodata-text {
	width: 100%;
	font-size: 5vw;
	display: grid;
	justify-items: center;
	align-items: center;
}

.body {
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 1fr;
}

.body-ask {
	width: 100%;
	height: 100%;
}

.body-ask-button {
	margin: 0 0 4vw 0;
	width: 100%;
	height: 10vw;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 20vw 1fr 20vw;
	/* grid-template-rows: 25vw auto; */
}

.body-ask-button-select {
	color: #1890FF;
	cursor: pointer;
}

.body-ask-button-delete {
	color: #B3B5B9;
	cursor: pointer;
}

.body-ask-content {
	width: 100%;
	/* height: calc(100vh - 40vw - 50px); */
	/* overflow: auto; */
}

.body-ask-piece {
	margin: 0 auto 4vw auto;
	width: 90%;
	height: 20vw;
	background: #ffffff;
	border-radius: 2vw;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 20% 55% 25%;
	/* grid-template-rows: 30% 40% 20%; */
	cursor: pointer;
}

.body-ask-piece-icon {
	width: 10vw;
	height: 10vw;
	background: url(../../static/mine/teacher.png);
	background-size: 100% 100%;
}

.body-ask-piece-content {
	margin: 4vw 0 0 0;
	width: 100%;
	height: 80%;
	display: grid;
	justify-items: start;
	align-items: center;
	/* grid-template-columns: 20% 70% 10%; */
	grid-template-rows: 50% 50%;
}

.body-ask-piece-content-ask {
	width: 100%;
	height: 8vw;
	line-height: 8vw;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #363A44;
	font-weight: 600;
}

.body-ask-piece-content-answer {
	width: 100%;
	height: 8vw;
	line-height: 8vw;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 3vw;
	color: #686B73;
}

.body-ask-piece-data {
	margin: 4vw 0 0 0;
	width: 100%;
	height: 80%;
	display: grid;
	justify-items: start;
	align-items: center;
	/* grid-template-columns: 20% 70% 10%; */
	grid-template-rows: 50% 50%;
}

.body-ask-piece-data-1 {
	width: 20vw;
	height: 100%;
	display: flex;
	float: right;
}

.body-ask-piece-data-2 {
	width: 20vw;
	height: 100%;
	display: flex;
	float: right;
}

.body-ask-piece-data-star {
	float: right;
	width: 9vw;
	display: grid;
	justify-items: end;
	align-items: center;
}

.body-ask-piece-data-star-icon {
	float: right;
	width: 5vw;
	height: 5vw;
	display: grid;
	justify-items: center;
	align-items: center;
	background: url(../../static/mine/star.png);
	background-size: 100% 100%;
	font-size: 3vw;
	line-height: 6vw;
}

.body-ask-piece-data-status {
	margin: 0 0 0 auto;
	width: auto;
	height: 100%;
	display: grid;
	justify-items: end;
	align-items: center;
	font-size: 3vw;
}

.statuscolor0 {
	color: #00B578;
}

.statuscolor1 {
	color: #FF6A2A;
}

.statuscolor2 {
	color: #B3B5B9;
}

.body-ask-piece-data-time {
	margin: 0 0 0 auto;
	width: auto;
	height: 100%;
	display: grid;
	justify-items: end;
	align-items: center;
	color: #B3B5B9;
	font-size: 3vw;
}

.point {
	width: 3vw;
	height: 100%;
	display: grid;
	justify-items: end;
	align-items: center;
}

.body-ask-piece-data-point {
	/* margin: 0 0 0 auto; */
	width: 2vw;
	height: 2vw;
	border-radius: 1vw;
	background: #FA3534;
}

.body-ask-button-selected {
	margin: 0 0 0 8vw;
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: auto auto auto;
	/* grid-template-rows: 25vw auto; */
	cursor: pointer;
}

.body-ask-button2 {
	margin: 0 0 4vw 0;
	width: 100%;
	height: 10vw;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: auto 1fr 10vw 20vw;
	/* grid-template-rows: 25vw auto; */
}

.body-ask-button-delete2 {
	color: #FF6A2A;
	cursor: pointer;
}

.body-ask-piece-data2 {
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
}

.body-ask-piece /deep/ .uni-data-checklist .checklist-group .checklist-box {}

.body-ask-piece /deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
	width: 4vw;
	height: 4vw;
}

.body-ask-piece /deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
	top: 0vw;
	left: 1vw;
	height: 3vw;
	width: 1.5vw;
}

.body-consultation {}

.body-information {
	padding: 0 5% 0 5%;
	width: 100%;
	height: calc(100vh - 25vw - 50px);
	display: grid;
	justify-items: center;
	align-items: center;
	grid-row-gap: 2vw;
	grid-template-rows: 50vw 30vw 10vw;
	background: #F8FBFF;
	overflow: auto;
}

.body-information-portrait {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	display: grid;
	justify-items: center;
	align-items: end;
	grid-template-rows: 1fr 7vw 7vw 7vw;
}

.body-information-portrait-icon {
	width: 20vw;
	height: 20vw;
}

.temporary {
	background: url(../../static/mine/personal.svg);
	background-size: 100% 100%;
}

.body-information-portrait-name {}

.body-information-portrait-info {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-column-gap: 2vw;
	grid-template-columns: auto auto;
}

.body-information-portrait-button {
	width: auto;
	height: auto;
	color: #1492FF;
}

.loginbtn {
	cursor: pointer;
}

.editbtn {
	width: 15vw;
	height: 6vw;
	background: url(../../static/mine/edit.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.body-information-data {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-rows: 30% 40% 30%;
	grid-template-columns: 1fr 1fr 1fr;
}

.body-information-data-ask {
	width: 15vw;
	height: 15vw;
	background: url(../../static/mine/asknum.svg);
	background-size: 100% 100%;
}

.body-information-data-evaluation {
	width: 15vw;
	height: 15vw;
	background: url(../../static/mine/evaluationnum.svg);
	background-size: 100% 100%;
}

.body-information-data-consult {
	width: 15vw;
	height: 15vw;
	background: url(../../static/mine/consultnum.svg);
	background-size: 100% 100%;
}

.body-information-button {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}

.body-information-bottom {
	width: 100%;
	height: 100%;
	background: #F8FBFF;
}

.popup {
	width: 60vw;
	height: 40vw;
	background: #ffffff;
	position: absolute;
	margin-left: -30vw;
	margin-top: -20vw;
	border-radius: 2.2vw;

	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-rows: 5vw 5vw 15vw 15vw;
}

.popup-close {
	margin: 2vw 0 0 55vw;
	width: 3vw;
	height: 3vw;
	background: url(../../static/index/close.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.popup-title {
	display: grid;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: 4vw;
}

.popup-text {
	margin: 0 5vw 0 05vw;
	width: 50vw;
	display: grid;
	justify-content: center;
	align-items: center;
	font-size: 3.4vw;
}

.popup-button {
	margin: 0 5vw 0 5vw;
	width: 50vw;
	height: 8vw;
	border-radius: 4vw;
	display: grid;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	background: #1492FF;
	cursor: pointer;
}

/deep/ .mescroll-uni-fixed {
	top: calc(39vw) !important;
}

.dygc /deep/ .mescroll-uni-fixed {
	top: calc(29vw) !important;
}</style>